import React, { useState, useEffect } from 'react';
import { View, PickerView, PickerViewColumn, } from '@ray-js/ray';
import styles from './index.module.less';
import { getRangeHour, getRangeMin } from '@/constant';
import { Picker, ConfigProvider } from '@ray-js/smart-ui';
import Strings from '@/i18n';

type Props = {
  pickerwidth: string,
  pickerheight: number,
  pickerpadding: string,
  indicatorheight: number,
  indicatorwidth: string,
  unit1: string,
  unit2: string,
  maskbck: string,
  fontSize: number,
  color: string,
  bck: string,
  handlePickerChange?: (e: any) => void,
  range1: number[],
  range2: number[],
  title: string,
  current?: string,
}
const TimePicker = (props: Props) => {
  const { pickerheight, pickerwidth, pickerpadding, fontSize, indicatorheight, color, unit1, maskbck, indicatorwidth, unit2, handlePickerChange, range1, range2, title, current } = props;

  // console.log("current", current);
  let curValues = current.split(":");
  let defIndex1=range1.findIndex((item) => item == parseInt(curValues[0]));
  let defIndex2=range2.findIndex((item) => item == parseInt(curValues[1]));
  let hColumns = [
    {
      defaultIndex: defIndex1,
      values: range1,
      style: { flex: 'none', color: '#75C6C0', fontWeight: '300', width: 'auto', minWidth: '72px', justifyContent: 'center' },
    },
    { 
      defaultIndex: defIndex2,
      values:  range2,
      style: { flex: 'none', color: '#75C6C0', fontWeight: '300', width: 'auto', minWidth: '72px', justifyContent: 'center' },
    },
  ]

  const onTimeHInput = React.useCallback(event => {
    console.log("event", event.detail);
    const { value, index } = event.detail;
  }, []
  );

  return (

    <View
      className={styles.container}
      style={{
        width: `${pickerwidth}`,
        height: `${pickerheight}rpx`,
        padding: `${pickerpadding}`,
      }}>  
      <View className={styles.title}> {title}</View>
        <View  className={styles.unit}>
          <View  style={{width:"80px",textAlign:"center"}} >{unit1}</View>
          <View  style={{width:"80px",textAlign:"center"}} >{unit2}</View>

        </View>
       <ConfigProvider
        themeVars={{
          pickerOptionSelectedTextColor: "#75C6C0",
          fontWeightBold: "300",
          pickerOptionFontSize:"15px",
          pickerBackgroundColor:"transparent"

        }}
      >
        <Picker
     
          columns={hColumns}
          defaultIndex={0}
          onChange={handlePickerChange}
          itemHeight={30}
          showToolbar={false}
          activeStyle={{
            color: '#75C6C0',
          }}
        />
      </ConfigProvider> 

    </View>
  )
}

export default TimePicker

TimePicker.defaultProps = {
  pickerwidth: "100%",
  pickerheight: 700,
  pickerpadding: '0rpx 0rpx',
  indicatorheight: 200,
  indicatorwidth: '100%',
  indicatorbck: 'rgba(242, 242, 242, 1)',
  unit2: Strings.getLang("str_minute_unit"),
  unit1: Strings.getLang("str_hour_unit"),
  maskbck: 'transparent',
  fontSize: 60,
  color: "rgba(0,0,0,1)",
  bck: "#FFFFFF",
  range1: getRangeHour(),
  range2: getRangeMin(),
}